<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<!--header.html 可分离-开始-->
<head>
<jsp:include page="header.jsp" />
<title>耶回收登录</title>
</head>
<!--header.html 可分离-结束-->

<body>
	<jsp:include page="yeah-top.jsp" />
	<!--login-->
	<div class="container" style="margin-top: 50px;">
		<div class="row">
			<div class="yeah-login-main">
				<div class="y-l-logo">
					<div class="logo" onclick="window.location='<%=basePath%>'">
					</div>
				</div>
				<div class="y-l-form" id="y-l-form">

					<div class="y-l-method">
						<div class="y-l-method1  active" style="color:#ff7000;cursor: pointer;">账号密码登录</div>
						<div class="y-l-method2" style="color:#ff7000;cursor: pointer;">手机验证登录</div>
					</div>
					<form action="denlu" method="post">
					<label style="color:red" v-model=" err " id="err">{{ err }}</label>
					
							<div class="input-group" id="account-name">
							<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span> 
							<input id="phone" type="text"class="form-control" v-model=" v1 " placeholder="手机号" name="phone" maxlength="11">
 							<!-- <button type="button" id="myButton" style="float: right; display: none; height:35px ; width: 100px" class="btn btn-primary get-code" onclick="settime(this)" /> -->
							<input type="button" id="myButton" value="获取验证码" onclick="settime(this)" style="float: right; display: none; height:35px ; width: 100px" class="btn btn-primary get-code"/> 
						</div>
						<div class="input-group" id="account-passwd">
							<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-lock"></span></span> 
							<input id="ee" type="password" class="form-control" placeholder="密码" name="password">
						</div>
						<button type="button" id="account-button" class="btn btn-default" onclick="login(this)">登录</button>
						<div class="forget-pw">
							<a tabindex="0" id="example" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title=".@@@—(*^▽^*)—@@@." data-content="忘记登录密码，建议您使用手机验证登录方式">忘记密码了？</a>
						</div>
						<div class="forget-tips" style="display: none;">未注册耶回收账号的手机号，登录时将自动创建耶回收账号</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script>  
		//发送验证码
		var countdown=60;
		function settime(obj) {
			var a =$("#err").html().trim();
			var phone=$("#phone").val();
			if(a==''&& phone!=null &&phone!=""){
				$.post("send",{phone:phone},function(data){
					if(data.msg=="success"){
						time(obj);
					}
				},"json");
			}
			function time(obj){
			    if (countdown == 0) {
			        obj.removeAttribute("disabled");   
			        obj.value="获取验证码";
			        countdown = 60;
			        return;
			    } else {
			        obj.setAttribute("disabled", true);
			        obj.value="重新发送(" + countdown + ")";
			        countdown--;
			    }
			setTimeout(function() {
			    time(obj) }
			    ,1000)
			}
		}  
	
		//登录
		function login(obj){
			var a =$("#err").html().trim();
			var phone=$("#phone").val();
			var password=$('[name="password"]').val();
			var code = $('[name="code"]').val();
			if(password!=null && password!=""){
				$.post("denlu",{phone:phone , password:password},function(data){
					if(data.success){
						window.location.href="<%=basePath%>";
					}else{
						vm.err = data.msg;
					}
				},"json");
			}
			if(code!=null && code!=""){
				$.post("denlu",{phone:phone , code:code},function(data){
					if(data.success){
						window.location.href="pw";
					}else{
						vm.err = data.msg;
					}
				},"json");
			}
		}
		
		
		
		//验证手机号
		function validatemobile(mobile, callback) {
			var err_msg = ' ';
			if (mobile.length == 0) {
				err_msg = '请输入有效的手机号码，需是11位！';
				callback(err_msg);
				return false;
			}
			if (mobile.length != 11) {
				err_msg = '请输入有效的手机号码，需是11位！';
				callback(err_msg);
				return false;
			}

			var myreg = /^(1\d{10})$/;
			if (!myreg.test(mobile)) {
				err_msg = '请输入有效的手机号码！';
				callback(err_msg);
				return false;
			}
			err_msg = '';
			callback(err_msg);
			return true;
		}
		var vm = new Vue({
			el : '#y-l-form',
			data : {
				v1 : '',
				err : " "
			}
		});
		vm.$watch('v1',function(newValue) {
			validatemobile(newValue, function(err_msg) {
				vm.err = err_msg;
			})
		})

		var o_method1 = $(".y-l-method1");
		var o_method2 = $(".y-l-method2");

		o_method1.click(function() {/*正常登录*/
			this.className = "y-l-method1 active";
			$('.form-control')[0].className = "form-control";
			$('.get-code')[0].style.display = "none";
			$('.forget-pw')[0].style.display = "block";
			$('.forget-tips')[0].style.display = "none";
			$("#ee").attr('placeholder', "密码");
			$("#ee").attr('name', "password");
			o_method2[0].className = "y-l-method2";
		});
		o_method2.click(function() {/*手机验证登录*/
					this.className = "y-l-method2 active";
					$('.form-control')[0].className = "form-control account-name-input";
					$('.get-code')[0].style.display = "block";
					$('.forget-pw')[0].style.display = "none";
					$('.forget-tips')[0].style.display = "block";
					$("#ee").attr('placeholder', "短信验证码");
					$("#ee").attr('name', "code");
					o_method1[0].className = "y-l-method1";
				});
		
		 $(function () {
		        $('[data-toggle="popover"]').popover()
		    });
		    $('#example').popover('hidden');
		    
		    
	</script>
	<!--login-->
</body>

</html>